import { useState, forwardRef, useImperativeHandle, useRef } from "react"

const RefMD = forwardRef((props, ref) => {
  const [name, setName] = useState('默认值')
  const inputRef = useRef(null)
  useImperativeHandle(ref, () => ({
    changeName: (val) => {
      setName(val)
    },
    inputRef
  }))
  return (
    <>
      <input type="text" ref={inputRef} />
      <div className='martop5'>
        <span>通过调用子组件的方法修改子组件的值：</span>
        <span>{name}</span>
      </div>
    </>
  )
})

export default RefMD
